<template>
  <div class="dashboard-container">
    <!-- 搜索筛选 -->
    <div class="search">
      <el-button type="primary" @click="handleSearch" size="mini">刷新</el-button>
    </div>
    <!-- 数据列表 -->
    <el-table :data="list" v-loading="loading">
      <el-table-column prop="report.name" label="项目名称"></el-table-column>
      <el-table-column prop="report.serialNumber" label="业务编号"></el-table-column>
      <el-table-column prop="createTime" label="创建时间"></el-table-column>
      <el-table-column prop="statusName" label="状态"></el-table-column>
      <el-table-column label="操作" width="150px">
        <template slot-scope="{row}">
          <el-button type="text" size="mini" @click="handleInfo(row.subject.id)">查勘</el-button>
          <el-button type="text" size="mini" @click="handleFinish(row.id)">完成</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="page">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="params.pageIndex + 1" :page-sizes="[10, 20, 30, 40]" :page-size="params.pageCount"
        layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>


    <el-dialog title="查看查勘详情" :visible="visibleDialog" @close="visibleDialog = false" width="800px" class="dialog">
        <div class="opt">
            <el-button type="primary" size="mini" @click="handeSave('close')">保存</el-button>
        </div>
        <div class="content">
            <div class="sub_title">查勘资料</div>
             <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="查勘信息" name="first">查勘信息</el-tab-pane>
                <el-tab-pane label="照片" name="second">照片</el-tab-pane>
                <el-tab-pane label="地图标注" name="third">
                    <div style="margin-bottom: 10px;">当前选择的经纬度：<span v-if="temp.longitude&&temp.latitude">{{ temp.longitude }},{{ temp.latitude }}</span></div>
                    <!-- coding先做地图标注 -->
                     <div id="baiduMap" :style="{width: '100%', height: '300px'}"></div>
                </el-tab-pane>
            </el-tabs>
        </div>
    </el-dialog>

  </div>
</template>

<script>
import { surveyGetList, surveyFinish, surveyInfo } from '@/api/survey';
import { transfromData } from '@/utils/tools';
import { subjectInfo } from '@/api/subject';
import { SURVEY_STATUS_LIST } from '@/utils/common'
import moment from 'moment'
let map;
export default {
    data() {
        return {
            SURVEY_STATUS_LIST,
            list: [],
            loading: false,
            params: {
                pageIndex: 0,
                pageCount: 10,
            },
            total: 0,
            temp: {},
            visibleDialog: false,
            activeName: 'first'
        }
    },
    async mounted() {
        this.handleSearch();
        
    },
    methods: {
        //保存坐标点
        savePoint(){
            console.log(111)
        },
        //点击切换tab
        handleClick(tab, event){
            if(this.activeName=='third'){
                map = new BMapGL.Map("baiduMap");
                var point = new BMapGL.Point(120.264267, 30.1841); // 地图中心点坐标
                map.centerAndZoom(point, 15); // 初始化地图，设置中心点坐标和地图级别
                // 打开地图缩放
                map.enableScrollWheelZoom(true);
                //监听地图点击事件
                map.addEventListener('click', (e)=>{
                    // 先清空之前的点
                    map.clearOverlays()
                    map.closeInfoWindow()
                    // 创建新的点
                    let { lat, lng } = e.latlng;
                    this.temp.longitude = lng;
                    this.temp.latitude = lat;
                    var point = new BMapGL.Point(lng, lat)
                    map.centerAndZoom(point, 16);  
                    var marker = new BMapGL.Marker(point);    
                    map.addOverlay(marker);
                    var opts = {
                        width: 250,     // 信息窗口宽度
                        height: 30,    // 信息窗口高度
                        title: "重新标记该处为楼盘位置？"  // 信息窗口标题
                    }
                    var infoWindow = new BMapGL.InfoWindow(`<span onclick="savePoint()" style="cursor: pointer; color:red;">[确定]</span>`, opts);  // 创建信息窗口对象
                    map.openInfoWindow(infoWindow,point);        // 
                    
                    window.savePoint = this.savePoint;
                })
            }
        },
        //点击查勘详情
        async handleInfo(id){
            let data = await subjectInfo({ id })
            this.visibleDialog = true
            this.temp = data;
        },
        //点击完成查勘
        async handleFinish(id){
            await surveyFinish({ id })
            this.$message.success({ message: '完成查勘' })
            //刷新详情数据
            this.getData();
        },
        handleSearch(){
            this.params.pageIndex = 0;
            this.getData();
        },
        async getData(){
            let data = await surveyGetList(this.params)
            this.list = data.list.map(item=>{
                item.createTime = moment(item.createTime).format('YYYY-MM-DD HH:mm:ss')
                item.statusName = transfromData(SURVEY_STATUS_LIST, item.status)
                return item;
            })
            this.total = data.totalCount
        },
        // 修改每页数量
        handleSizeChange(val) {
            this.params.pageIndex = 0;
            this.params.pageCount = val;
            this.getData();
        },
        // 切换分页
        handleCurrentChange(val) {
            this.params.pageIndex = val - 1;
            this.getData();
        }
    }
}
</script>
<style>
.dialog .el-dialog__body {
  padding-top: 0;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* 两列 */
  gap: 10px;
  /* 间距 */
  
}

</style>
<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
    position: relative;
    .page {
      padding: 20px 0;
      text-align: center;
    }
    .dialog{
      .opt {
        margin-bottom: 10px;
      }
    }
    .content {
      height: 500px;
      overflow-y: scroll;
      padding-right: 10px;
    }
    .sub_title {
        text-align: center;
        background: #f5f5f5;
        height: 30px;
        line-height: 30px;
        margin-bottom: 10px;
        color: black;
        border: 1px solid #ddd;
    }
  }
}
</style>